<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<style>
		table {
			border-collapse: collapse;
			width: 500px;
		}

		table tr td {
			border: 1px solid blue;
		}
	</style>
</head>

<body>
	<div id="app">
		<h3>购物车</h3>
		<hr />
		<input type="text" @keyup.enter="Mysearch" v-model="PhoneName">
		<table>
			<tr>
				<td>
					<input type="checkbox" v-model="checked" @change="checkAll" />
				</td>
				<td>id</td>
				<td>名称</td>
				<td>价格</td>
				<td>数量</td>
				<td>小计</td>

			</tr>
			<tr v-for="(item,index) in cartData" :key="item.id">
				<td>
					<input type="checkbox" name="" id="" :value="item.id" v-model="checkarr" />
				</td>
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td>{{item.price}}</td>
				<td>
					<button :disabled="item.num <=1" @click="item.num--">-</button>
					{{item.num}}
					<button @click="item.num++">+</button>
					<button @click="delFunc(index)">×</button>

				</td>
				<td>{{item.price * item.num}}</td>
			</tr>
			<!-- 1、在dom上增加了一行，写 总数量和总价格 -->
			<tr>
				<td>
					<button @click="Nocheckedf">反选</button>
				</td>
				<td></td>
				<td></td>
				<td></td>
				<!-- 4.调用 总数量的计算属性 -->
				<td>总数量：{{totalNum.sum}}</td>
				<td>总价格：{{totalNum.Allprice}}</td>
			</tr>
		</table>
	</div>
	<script src="./js/vue.js"></script>
	//git上下的拼音检查工具
	<script src="./js/pinyin-match/dist/main.js"></script>
	<script>
		var app = new Vue({
			el: "#app",
			data: {
				checkarr: [],//选中的input 的 value值
				checked: false,//全选按钮目前不是选中状态
				PhoneName: "",
				cartData: [{
					id: 1,
					name: '小米',
					price: 100,
					num: 1
				}, {
					id: 2,
					name: '华为',
					price: 200,
					num: 2
				}, {
					id: 3,
					name: '联想',
					price: 350,
					num: 1
				}, {
					id: 4,
					name: '小米',
					price: 400,
					num: 1
				}, {
					id: 5,
					name: '一加',
					price: 325,
					num: 1
				}],
				//记录原来的数组
				//没法在搜索后重置数组只能提前储存了
				oldcartData: [{
					id: 1,
					name: '小米',
					price: 100,
					num: 1
				}, {
					id: 2,
					name: '华为',
					price: 200,
					num: 2
				}, {
					id: 3,
					name: '联想',
					price: 350,
					num: 1
				}, {
					id: 4,
					name: '小米',
					price: 400,
					num: 1
				}, {
					id: 5,
					name: '一加',
					price: 325,
					num: 1
				}]
			},
			methods: {
				delFunc: function (index) {
					confirm("确认要删除么？") && this.cartData.splice(index, 1);
					// if(confirm("确认要删除么？") ){
					//     this.cartData.splice(index, 1);
					// }
					if (this.checkarr.length === this.cartData.length) {//全部选中
						this.checked = true;
					} else {//没有全部选中
						this.checked = false;
					}
				},
				//全选
				checkAll: function () {
					if (this.checked) {
						this.cartData.forEach(item => {
							//将选中的input框的value值放到 数组中
							//如果已经有就不在push
							if (!this.checkarr.includes(item.id)) {
								this.checkarr.push(item.id)
							}
						})
					} else {
						this.checkarr = [];
					}
				},
				//反选
				Nocheckedf: function () {
					//循环cartData数组
					this.cartData.forEach(item=>{
						//查找checkarr中是否有对应的item.id
						//有则返回在数组中的下标 无则返回-1
						let num = this.checkarr.indexOf(item.id)
						//判断是否有
						if(num!=-1){
							//有就删除当前下标的数据
							this.checkarr.splice(num,1)
						}else{
							//没有就push
							this.checkarr.push(item.id)
						}
					})
				},
				//查询名字
				Mysearch: function () {
					//判断查询的值是否为空
					if (app.PhoneName == "" || app.PhoneName == undefined) {
						this.cartData = this.oldcartData
					} else {
						this.cartData = this.oldcartData.filter(function (arr) {
							//PinyinMatch 拼音检查工具
							//https://github.com/xmflswood/pinyin-match
							return PinyinMatch.match(arr.name,app.PhoneName)
						})
					}
				}
			},
			//2.定义 计算属性，计算总数量
			computed: {
				totalNum: function () {
					var sum = 0; //存放 总数量
					var Allprice = 0;//存放 总价格
					//3.判断 商品是否选中
					console.log(this.checkarr);
					this.cartData.forEach(item => {
						let pos = this.checkarr.indexOf(item.id);//如果能查询到 id  就表示选中了
						if (pos != -1) {
							Allprice += item.num * item.price//计算总价
							sum += item.num;
						}
					})
					//返回一个对象
					return { "sum": sum, "Allprice": Allprice };
				},

			},
			//需求： 什么时候可以将 全选的对钩画上
			watch: {
				//a.新建监听函数 监听每个商品的input是否选中  ，监听 checkarr
				checkarr: function () {
					console.log("监听了");
					if (this.checkarr.length === this.cartData.length) {//全部选中
						this.checked = true;
					} else {//没有全部选中
						this.checked = false;
					}
				}
			}
		})
	</script>
</body>

</html>